/* * @index.vue * @description * @author lxj * @update (lxj 2023/12/5) */

<template>
  <div class="echarts-container">
<!--    <el-radio-group>-->
<!--      <el-radio-button label="关系图谱" @click="showChart = 'relationgraph'"></el-radio-button>-->
<!--      <el-radio-button label="地域图" @click="showChart = 'chinagraph'"></el-radio-button>-->
<!--      <el-radio-button label="折线图" @click="showChart = 'line'"></el-radio-button>-->
<!--      <el-radio-button label="条形图" @click="showChart = 'bar'"></el-radio-button>-->
<!--      <el-radio-button label="雷达图" @click="showChart = 'radar'"></el-radio-button>-->
<!--    </el-radio-group>-->
<!--    <RelationGraph></RelationGraph>-->
    <ChinaGraph ></ChinaGraph>

    <Echarts
      title="年龄分布"
      headerIcon="icon-chart-histogram"
      :style="{
        height: '200px',
      }"
      :options="{
        series,
        xAxis,
        yAxis,
      }"
    />
    <Echarts
      :index="1"
      title="性别分布"
      headerIcon="icon-chart-histogram"
      :style="{
        height: '200px',
      }"
      :options="{
        xAxis: {},
        yAxis: {},
        series: series2,
      }"
    />

  </div>
</template>

<script>
  import { reactive, toRefs } from 'vue';
  import Echarts from '@/components/Echarts/index.vue';
  import { useI18n } from 'vue-i18n';
  import axios from "axios";
  export default {
    components: { Echarts },
    data() {
      return {
        showChart: 'relationgraph',
        age_des: [],
        age_tig:[],
        age_rate:[],
      };
    },
    async mounted() {
      try {
        const [response1, response2] = await Promise.all([
          axios.get('http://127.0.0.1:4523/m1/3571383-0-default/api/baidu/baidu2'),
          axios.get('http://127.0.0.1:4523/m1/3571383-0-default/api/baidu/baidu3'),
        ]);

        // 处理响应数据
        console.log(response1.data);
        console.log(response2.data);
      } catch (error) {
        // 处理错误
        console.error(error);
      }
    },
    setup() {
      const { t } = useI18n();
      const state = reactive({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
          },
        ],
        tooltip: {
          trigger: 'axis',
        },

        calculable: true,
        xAxis2: [
          {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月',
            ],
          },
        ],
        yAxis2: [
          {
            type: 'value',
          },
        ],
        series2: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [7.08, 5.82],
              [5.02, 5.68],
            ],
            type: 'scatter',
          },
        ],
        series3: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' },
            ],
          },
        ],

        radar: {
          // shape: 'circle',
          indicator: [
            { name: '销售（Sales）', max: 6500 },
            { name: '管理（Administration）', max: 16000 },
            { name: '信息技术（Information Technology）', max: 30000 },
            { name: '客服（Customer Support）', max: 38000 },
            { name: '研发（Development）', max: 52000 },
            { name: '市场（Marketing）', max: 25000 },
          ],
        },

      });

      return {
        ...toRefs(state),
        t,
      };
    },
  };
</script>

<style lang="scss" scoped>
  .echarts-container {
    padding: $base-main-padding;
    background-color: $base-color-white;
    .row {
      margin-top: 20px;
    }
  }
  .showBtn {
    margin-left: 30%;
    margin-bottom: 10em;
    margin-right: auto;
  }
  //.el-radio-button {
  //  width: 100%;
  //}
</style>
